<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>base - KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css" />
<link rel="stylesheet" href="../assets/docs.css" />
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/blob/master/src/base/attribute.js">attribute.js</a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
    <div class="col-main">
        <div class="main-wrap">
            <div class="section summary">
                <p>鉴于不同浏览器对属性描述符的支持并不统一, KISSY 模拟实现了属性描述符, 提供属性的获取和设置操作, 即属性的 getter 和 setter 动作.</p>
            </div>
            <div class="section">
                <h3 id="methods">Methods</h3>
                <div class="member method">
                    <h4>
                        <a name="method_addAttr">addAttr</a>
                        <code>void <em>addAttr</em>( name, attrConfig )</code>
                    </h4>
                    <div class="detail">
                        <p>给宿主对象增加一个属性. </p>
                        <dl class="parameters">
                            <dt>Parameters:</dt>
                            <dd>
                                <code class="param-name">name</code>
                                <code class="param-type">&lt;String&gt;</code>
                                属性名.
                            </dd>
                            <dd>
                                <code class="param-name">attrConfig</code>
                                <code class="param-type">&lt;attrConfig&gt;</code>
                                属性配置信息, 支持下面的配置项:
                            </dd>
                        </dl>
<pre>
{
    value: 'the default value',     // 属性默认值
    valueFn: function               // 提供属性默认值的函数
    setter: function                // 写属性
    getter: function                // 读属性
}
</pre>
                        <p class="tips">如果配置项中没有设置 value, 会调用 valueFn 函数获取默认值并赋给 value.</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_addAttrs">addAttrs</a>
                        <code>void <em>addAttrs</em>( attrConfigs, values )</code>
                    </h4>
                    <div class="detail">
                        <p>批量添加属性. </p>
                        <dl class="parameters">
                            <dt>Parameters:</dt>
                            <dd>
                                <code class="param-name">attrConfigs</code>
                                <code class="param-type">&lt;Object&gt;</code>
                                属性名/配置信息对.
                            </dd>
                            <dd>
                                <code class="param-name">values</code>
                                <code class="param-type">&lt;values&gt;</code>
                                属性名/值对, 该值为属性的默认值, 会覆盖配置信息中的默认值.
                            </dd>
                        </dl>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_hasAttr">hasAttr</a>
                        <code>void <em>hasAttr</em>( name )</code>
                    </h4>
                    <div class="detail">
                        <p>判断是否有名为 name 的属性.</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_removeAttr">removeAttr</a>
                        <code>void <em>removeAttr</em>( name )</code>
                    </h4>
                    <div class="detail">
                        <p>删除名为 name 的属性.</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_set">set</a>
                        <code>void <em>set</em>( name, value )</code>
                    </h4>
                    <div class="detail">
                        <p>设置属性 name 的值为 value.</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_get">get</a>
                        <code>void <em>get</em>( name )</code>
                    </h4>
                    <div class="detail">
                        <p>获取属性 name 的值.</p>
                        <p class="tips">当没有设置属性值时, 会取该属性的默认值.</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_reset">reset</a>
                        <code>void <em>reset</em>( name )</code>
                    </h4>
                    <div class="detail">
                        <p>重置属性 name 为初始值. 如果不给出属性名, 默认将所有属性名全部重置为初始值.</p>
                        <p class="tips">重置属性值, 同样会触发 "beforeAttrNameChange" 和 "afterAttrNameChange" 事件.</p>
                    </div>
                </div>
            </div>

            <div class="section">
                <h3 id="Events">Events</h3>
                <div class="member event">
                    <h4>
                        <a name="event_beforeAttrNameChange">beforeAttrNameChange</a>
                    </h4>
                    <div class="detail">
                        <p>名为 "attrName" 的属性, 在改变它的值之前触发该事件.</p>
                    </div>
                </div>

                <div class="member event">
                    <h4>
                        <a name="event_afterAttrNameChange">afterAttrNameChange</a>
                    </h4>
                    <div class="detail">
                        <p>名为 "attrName" 的属性, 在改变它的值之后触发该事件.</p>
                    </div>
                </div>
            </div>

            <div class="section">
                <h3 id="demo">示例</h3>
<pre class="example-code"><code>
KISSY.ready(function(S) {
    // 自定义类
    function myClass() {
    }

    // 让你的类支持属性描述符
    S.augment(myClass, S.Attribute);

    var cls = new myClass();

    // 增加属性
    cls.addAttr('size', {
        value: 0,
        setter: function(v) {
            if (S.isString(v) && v.indexOf('inch')!== -1) {
                return parseFloat(v)*10/3;
            }
            return parseFloat(v);
        },
        getter: function(v) {
            return v;
        }
    });
    // 绑定事件
    cls.on('afterSizeChange', function(ev){
        console.log('change '+ ev.attrName + ': '+ev.prevVal+' --> '+ev.newVal);
    });

    // 设置属性
    cls.set('size', 20);

    // 获取属性
    alert(cls.get('size'));

    // 重置
    cls.reset();
    alert(cls.get('size'));
});
</code></pre>
                <p class="notice"> 如果你想让类默认就支持 attribute 功能, 请直接继承 <a href="../base/index.html">S.Base</a> .</p>
            </div>

        </div>
    </div>
    <div class="col-sub">
        <div class="sub-wrap">
            <div class="loc"><a href="../index.html">home</a> &rsaquo; base :</div>
            <div class="toc">
                <h3>Methods</h3>
                <ul>
                    <li><a href="#method_addAttr">addAttr</a></li>
                    <li><a href="#method_addAttrs">addAttrs</a></li>
                    <li><a href="#method_hasAttr">hasAttr</a></li>
                    <li><a href="#method_removeAttr">removeAttr</a></li>
                    <li><a href="#method_set">set</a></li>
                    <li><a href="#method_get">get</a></li>
                    <li><a href="#method_reset">reset</a></li>
                </ul>

                <h3>Events</h3>
                <ul>
                    <li><a href="#event_beforeAttrNameChange">beforeAttrNameChange</a></li>
                    <li><a href="#event_afterAttrNameChange">afterAttrNameChange</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>
</body>
</html>
